<script>
  import { onMount } from "svelte"
  import { loadFull } from "tsparticles"

  let ParticlesComponent

  onMount(async () => {
    const module = await import("svelte-particles")

    ParticlesComponent = module.default
  })

  let particlesUrl = "/json/color.json"
  //   let particlesUrl = "./json/hexagons.json"

  let particlesConfig = {}

  let onParticlesLoaded = (event) => {
    const particlesContainer = event.detail.particles

    // you can use particlesContainer to call all the Container class
    // (from the core library) methods like play, pause, refresh, start, stop
  }

  let particlesInit = async (main) => {
    // you can use main to customize the tsParticles instance adding presets or custom shapes
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main)
  }
</script>

<!-- <div>
	<svelte:component
		this={ParticlesComponent}
		id="tsparticles"
		url={particlesUrl}
		on:particlesLoaded={onParticlesLoaded}
		{particlesInit}
	/>
</div> -->
<svelte:component
  this={ParticlesComponent}
  id="tsparticles"
  url={particlesUrl}
  on:particlesLoaded={onParticlesLoaded}
  {particlesInit}
/>
